﻿@model BillingInfoModel
@using Logistics.Web.Models.Order
@using Nop.Web.Models.Common
@{
    ViewBag.Title = "Billing Information";
    // +string+

    Layout = "~/Views/Shared/_Layout";
}

<div class="window-right-bar" id="ordersummary-window">
    @Html.Action("Summary", "Order")
</div>

<div class="window-left-block order-billing">
    @using (Html.BeginForm())
    {
        <div class="window">
            <div class="window-title grad-lightgrey grad">
                <div class="window-title-bar grad-titleshine grad">
                    <h2>Billing Information</h2>
                </div>
            </div>

            <div class="window-content signup-billingwrapper">
                <div class="window-content space signup-billingaddress billinginfo-billingaddress">
                    @Html.ValidationSummary()
                    <div class="signup-mandatory">
                        @Html.RequiredHint()<span>= Mandatory Fields</span>
                    </div>
                    <div class="signup-left">

                        <div class="signup-company signup-fieldgroup">
                            <div class="form-label">
                                @Html.LabelFor(model => model.BillingAddress.Company)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Company)
                            @Html.ValidationMessageFor(model => model.BillingAddress.Company)
                        </div>

                        <div class="signup-name signup-fieldgroup">
                            <div class="signup-firstname">
                                <div class="form-label">@Html.RequiredHint() @Html.LabelFor(model => model.BillingAddress.FirstName)</div>
                                @Html.EditorFor(model => model.BillingAddress.FirstName)
                                @Html.ValidationMessageFor(model => model.BillingAddress.FirstName)
                            </div>
                            <div class="signup-lastname">
                                <div class="form-label">@Html.RequiredHint() @Html.LabelFor(model => model.BillingAddress.LastName)</div>
                                @Html.EditorFor(model => model.BillingAddress.LastName)
                                @Html.ValidationMessageFor(model => model.BillingAddress.LastName)
                            </div>
                            <div class="content-clear"></div>
                        </div>

                        <div class="signup-address signup-fieldgroup">
                            <div class="form-label">
                                @Html.LabelFor(model => model.BillingAddress.Address2)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Address2)
                            @Html.ValidationMessageFor(model => model.BillingAddress.Address2)
                        </div>

                        <div class="signup-address signup-fieldgroup">
                            <div class="form-label">
                                @Html.RequiredHint()
                                @Html.LabelFor(model => model.BillingAddress.Address1)
                            </div>
                            @Html.EditorFor(model => model.BillingAddress.Address1)
                            @Html.ValidationMessageFor(model => model.BillingAddress.Address1)
                        </div>



                    </div>

                    <div class="signup-right">
                        <div class="signup-zipcity signup-fieldgroup">

                            <div class="signup-city">
                                <div class="form-label">
                                    @Html.RequiredHint()
                                    @Html.LabelFor(model => model.BillingAddress.City)
                                </div>
                                @Html.EditorFor(model => model.BillingAddress.City)
                                @Html.ValidationMessageFor(model => model.BillingAddress.City)
                            </div>
                            <div class="signup-zipcode">
                                <div class="form-label">
                                    @Html.RequiredHint()
                                    @Html.LabelFor(model => model.BillingAddress.ZipPostalCode)
                                </div>
                                @Html.EditorFor(model => model.BillingAddress.ZipPostalCode)
                                @Html.ValidationMessageFor(model => model.BillingAddress.ZipPostalCode)
                            </div>
                            <div class="content-clear"></div>
                        </div>

                        <div class="signup-countryprovince signup-fieldgroup">

                            <div class="signup-country">
                                <div class="form-label">@Html.LabelFor(model => model.BillingAddress.CountryName)</div>

                                <div class="location-display">
                                    @Html.DisplayFor(model => model.BillingAddress.CountryName)
                                    @Html.HiddenFor(model => model.BillingAddress.CountryId)
                                </div>
                            </div>

                            <div class="signup-stateprovince">
                                <div class="form-label">@Html.LabelFor(model => model.BillingAddress.StateProvinceName)</div>
                                <div class="location-display">
                                    @Html.DisplayFor(model => model.BillingAddress.StateProvinceName)
                                    @Html.HiddenFor(model => model.BillingAddress.StateProvinceId)
                                </div>
                                <span id="states-loading-progress-billing" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                            </div>

                            <div class="content-clear"></div>

                        </div>

                        <div class="signup-phonegroup signup-fieldgroup">
                            <div class="signup-cellphone">
                                <div class="form-label">
                                    @Html.RequiredHint()
                                    @Html.LabelFor(model => model.BillingAddress.CellPhoneNumber)
                                </div>
                                @Html.EditorFor(model => model.BillingAddress.CellPhoneNumber)
                                @Html.ValidationMessageFor(model => model.BillingAddress.CellPhoneNumber)
                            </div>

                            <div class="signup-phone">
                                <div class="form-label">
                                    @Html.LabelFor(model => model.BillingAddress.PhoneNumber)
                                </div>
                                @Html.EditorFor(model => model.BillingAddress.PhoneNumber)
                                @Html.ValidationMessageFor(model => model.BillingAddress.PhoneNumber)
                            </div>
                            <div class="content-clear"></div>
                        </div>

                        <div class="signup-fieldgroup">
                            <div class="signup-email">
                                <div class="form-label">
                                    @Html.RequiredHint()
                                    @Html.LabelFor(model => model.BillingAddress.Email)
                                </div>
                                @Html.EditorFor(model => model.BillingAddress.Email)
                                @Html.ValidationMessageFor(model => model.BillingAddress.Email)
                            </div>
                            <div class="content-clear"></div>
                        </div>

                        <input type="submit" class="button-red signup-billingcontinue" value="Continue" />
                    </div>
                    <div class="content-clear"></div>
                </div>
            </div>
            <div class="content-clear"></div>
        </div>
    }
</div>

<div class="content-clear"></div>

<script>
    $(document).ready(function () {
        validationInputStyling();
    });
    $('.signup-billingcontinue').click(function () {
        var clickedButton = $(this);
        $('.clicked').removeClass(".clicked").show();
        $('#ajax-loading-bar').hide();
        clickedButton.addClass("clicked").hide();
        $('#ajax-loading-bar').clone().show().css({
            "display": "inline-block",
            "float": clickedButton.css("float"),
            "width": 150,
            "height": 30,
            "margin-top": clickedButton.css("margin-top"),
            "margin-bottom": clickedButton.css("margin-bottom"),
            "margin-left": clickedButton.css("margin-left"),
            "margin-right": clickedButton.css("margin-right")
        }).insertAfter(clickedButton);
    });
    function validationInputStyling() {
        $('.field-validation-error').each(function () {
            $(this).prev('input').css({ "border": "1px solid #fc566a" });
        });
    }

</script>